<template>
  <div class="departments-container">
    <el-card>
      <treeTool :treenode="company" :isheader="true" @doadd="showdialog" />
      <!-- divider分割线 -->
      <el-divider />
      <!-- 树形控件 -->
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="defaultProps"
      >
        <!-- 插槽 -->
        <div slot-scope="{ data }" style="width:100%">
          <!-- 父组件传递数据给子组件的treenode -->
          <treeTool
            :treenode="data"
            @getnewdpm="getDptList"
            @doadd="showdialog"
            @closedialog="closedialog"
          />
        </div>
      </el-tree>
      <addDpm
        ref="addDpm"
        :dialog="isshow"
        :pid="currentid"
        @closedialog="closedialog"
      />
    </el-card>
  </div>
</template>

<script>
import treeTool from './components/tree-tool.vue'
import { getDptList } from '@/api/department'
import { toTreeData } from '../../utils/index.js'
import addDpm from './components/addDpm.vue'
export default {
  components: {
    treeTool,
    addDpm
  },
  data () {
    const data = [
      {
        id: 1,
        label: '总裁办',
        manager: '顺才'
      },
      {
        id: 2,
        label: '行政部',
        manager: '顺才',
        children: [
          {
            id: 2 - 1,
            label: '司法',
            manager: '罗翔'
          },
          {
            id: 2 - 2,
            label: '刑法',
            manager: '罗翔'
          }
        ]
      }
    ]
    return {
      isshow: false,
      currentid: '',
      // 数组转字符串，在转数组？？？深拷贝？？？
      data: JSON.parse(JSON.stringify(data)),
      company: {
        name: '家里蹲公司',
        manager: '负责人',
        id: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getDptList()
  },
  methods: {
    // 关闭dialog
    closedialog () {
      this.isshow = false
      // 重新加载
      this.getDptList()
    },
    // 显示dialog
    async showdialog (id) {
      await this.$refs.addDpm.getDetail(id)
      this.isshow = true
      this.currentid = id
      console.log(this.isshow)
      console.log(id)
    },
    async getDptList () {
      const res = await getDptList()
      console.log('部门列表', res)
      this.company.name = res.data.companyName
      const list = res.data.depts
      console.log(list)
      this.data = toTreeData(list, '')
    }
  }
}
</script>

<style lang="scss">
.departments-container {
  .el-card {
    margin: 20px;
    padding: 140px 120px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
